import React, { memo } from 'react'

import {TopRankingWrapper} from './style';
import {
  getSizeImage,
} from "@/utils/format-utils";

import {getSongDetailAction} from '@/pages/player/store';
import { useDispatch } from 'react-redux';

export default memo(function TopRanking(props) {

    const {info}=props;
    // console.log(info);
    const { tracks = [] } = info;

    const dispatch=useDispatch();


    const playMusic=(item)=>{
        // console.log(item.id);
        dispatch(getSongDetailAction(item.id))
    }

    return (
        <TopRankingWrapper>
            <div className="header">
                <div className="image">
                    <img src={getSizeImage(info.coverImgUrl)} alt="" />
                    <a href="todo" className="image_cover">Ranking</a>
                </div>
                <div className="info">
                    <a href="/todo">{info.name}</a>
                    <div>
                        <button className="btn sprite_02 play"></button>
                        <button className="btn sprite_02 favor"></button>
                    </div>
                </div>
            </div>
            <div className="list">
                {
                    tracks.slice(0,10).map((item,index)=>{
                        return (
                          <div key={item.id} className="list-item">
                                <div className="rank">{index + 1}</div>
                                <div className="info">
                                <span className="name text-nowrap">{item.name}</span>
                                <div className="operate">
                                    <button className="btn sprite_02 play" onClick={e=>playMusic(item)}></button>
                                    <button className="btn sprite_icon2 addto"></button>
                                    <button className="btn sprite_02 favor"></button>
                            </div>
                          </div>
                        </div>
            )
                    })
                }
            </div>
            <div className="footer">
                <a href="/todo">查看全部 &gt;</a>
            </div>
        </TopRankingWrapper>
    )
})
